<template>
  <div class="singerDetail">
    <div class="flex singerInfo">
      <div class="img-wrap">
        <img :src="singerInfo.cover+'?param=200y200'" alt="">
      </div>
      <div class="info mgl-20">
        <div class="flex top-title">
          <span class="font-24 font-bold">
            {{ singerInfo.name }}
          </span>
          <button class="btn">
            <i class="el-icon-folder-add"></i>
            收藏
          </button>
        </div>
        <div class="mgt-20">
          <div class="font-14">单曲数: {{ singerInfo.musicSize }}</div>
          <div class="font-14">专辑数: {{ singerInfo.albumSize }}</div>
          <div class="font-14">MV数: {{ singerInfo.mvSize }}</div>
        </div>
      </div>
    </div>
    <tab-menu :tabsMenuList="menuList" @tabsChange="tabsChange"></tab-menu>
    <!-- 专辑 -->
    <!-- 热门50 -->
    <div v-show="tabIndex === '0'">
      <div class="top50 flex">
        <!-- 图片 -->
        <div class="top50-img-wrap">
          <img src="https://cdn.jsdelivr.net/gh/dingwanren/myImgCDN/top50.png">
        </div>
        <!-- 歌曲列表 -->
        <div class="song mgl-40">
          <div class="play-btn">
            <span>热门50首</span>
            <button class="no-btn mgl-20 font-20">
              <i class="el-icon-video-play"></i>
            </button>
          </div>
          <songs-list :songs="songsList" :isShowArtist="false" :isShowLike="false" :isShowTrackName="false" :isShowAll="false"></songs-list>
        </div>
      </div>
      <!-- 专辑显示 -->
      <div class="album-wrap">
        <div class="album-item flex mgt-50" v-for="item in albumList" :key="item.id">
          <div class="top50-img-wrap">
            <img :src="item.picUrl + '?param=200y200'">
          </div>
          <div class="song mgl-40">
            <div class="play-btn">
              <span>{{ item.name }}</span>
              <span class="font-12 mgl-10">{{ item.publishTime | dateFormat }}</span>
              <button class="no-btn mgl-20 font-20" @click="playAllSongs(item.songs)">
                <i class="el-icon-video-play"></i>
              </button>
            </div>
            <songs-list :songs="item.songs" :isShowArtist="false" :isShowLike="false" :isShowTrackName="false" :isShowAll="false"></songs-list>
          </div>
        </div>
      </div>
    </div>
    <!-- mv -->
    <div v-show="tabIndex === '1'" class="mv-wrap">
      视频列表不太行,有些是item.imgUrl,有些是item.data.coverUrl,不能复用(偷懒)
    </div>
    <!-- 歌手详情 -->
    <div v-show="tabIndex === '2'" class="singerdesc-wrap">
      <h4>个人简介</h4>
      <div class="font-14">{{ singerDesc.briefDesc }}</div>
      <div v-for="(item, index) in singerDesc.introduction" :key="index">
        <!-- p标签不能嵌套,html无法解析\n,所以用pre标签 -->
        <div class="font-16 font-bold mgt-20">{{ item.ti }}</div>
        <div class="font-14 mgt-10">{{ item.txt }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { getSingerDetail, getSingerTop50, getSingerAlbum, getSingerDesc, getSingerMV } from '@/api/singer.js'
import { getAlbumDetail } from '@/api/album.js'
import TabMenu from '@/components/TabMenu/tabMenu.vue'
import SongsList from '../../components/SongsList/songsList.vue'
// import VideoList from '../../components/video/videoList.vue'

export default {
  data () {
    return {
      singerInfo: {},
      menuList: [{ name: '专辑' }, { name: 'MV' }, { name: '歌手详情' }],
      // top50歌曲数组
      songsList: [],
      // mv
      mvs: [],
      // 专辑数组
      albumList: [],
      // 歌手描述数据
      singerDesc: {},
      // 用于控制tab页切换显示,默认专辑页
      tabIndex: '0'
    }
  },
  components: {
    TabMenu,
    SongsList
  },
  created () {
    this.showSinger()
    this.showTop50()
    this.showAlbum()
    this.showSingerDesc()
    this.showMV()
  },
  methods: {
    // tab页切换
    tabsChange (index) {
      // 这里index是字符串类型
      this.tabIndex = index
    },
    // 展示歌手信息
    async showSinger () {
      const res = await getSingerDetail(this.$route.params.id)
      // console.log(res)
      if (res.data.code !== 200) return this.$messsage.error('获取歌手信息失败')
      this.singerInfo = res.data.data.artist
    },
    // 展示热门50首
    async showTop50 () {
      const res = await getSingerTop50(this.$route.params.id)
      if (res.data.code !== 200) return this.$messsage.error('获取歌曲信息失败')
      this.songsList = res.data.songs
    },
    // 展示专辑
    async showAlbum () {
      const res = await getSingerAlbum(this.$route.params.id)
      if (res.data.code !== 200) return this.$messsage.error('获取专辑失败')
      res.data.hotAlbums.forEach(async item => {
        const res2 = await getAlbumDetail(item.id)
        item.songs = res2.data.songs // 将原来的那个无专辑内容songs数组替换成有专辑内容的songs数组
      })
      // 保存专辑列表
      this.albumList = res.data.hotAlbums
      // console.log(this.albumList)
    },
    // 展示歌手描述
    async showSingerDesc () {
      const res = await getSingerDesc(this.$route.params.id)
      // console.log(res)
      if (res.data.code !== 200) return this.$messsage.error('获取歌手信息失败')
      this.singerDesc = res.data
    },
    async showMV () {
      const res = await getSingerMV(this.$route.params.id)
      if (res.data.code !== 200) return this.$messsage.error('获取MV失败')
      this.mvs = res.data.mvs.forEach(item => {
        item.coverUrl = item.imgUrl
      })
      // console.log(res) // res.data.mvs
    },
    // 播放专辑所有歌曲
    playAllSongs (songs) {
      // 把专辑个歌曲id都放到数组中
      const songIdArr = []
      // 每首歌的id都放进去
      songs.forEach(item => songIdArr.push(item.id))
      // 播放整张专辑,(播放专辑第一首,把位置改成第一首这两个操作在mutation中已经做了,不用在这里重复做)
      this.$store.commit('playAlbumSong', songIdArr)
    }
  }
}
</script>

<style lang="less" scoped>
.info {
  text-align: left;
}
.top50-img-wrap {
  width: 200px;
  img {
    width: 100%;
  }
}
.song {
  width: 700px;
  .play-btn {
    text-align: left;
  }
}
.mv-wrap {
  height: 300px;
}
.singerdesc-wrap {
  text-align: left;
  white-space: pre-line;
}
</style>
